<!--友情链接组件-->
<template>
  <div class="friendship-links">
    <div class="link-container">
      <i class="el-icon-link"></i>
      <p class="most-used-link">常用链接</p>
    </div>
    <div class="divider"></div>
    <ul class="links-list">
      <li v-for="link in linkList" :key="link.link_id">
        <div class="link-box">
        <a :href="link.link_url" target="_blank">{{ link.link_name }}</a>
        </div>
      </li>
    </ul>
    <div class="divider"></div>
  </div>
</template>

<script>
import service from '@/utils/service';
export default {
  data() {
    return {
      linkList:[],
    };
  },
  methods:{
    //获取常用链接
    async getAllLink(){
      try{
        const relativeUrl = '/links';
        const response = await service.get(relativeUrl);

        if(response.data.code === 20041){
          this.linkList = response.data.data;
          console.log(this.linkList);
        }

      }catch{
        console.log('获取所有链接出错');

      }

    }
  },
  created(){
    this.getAllLink();
  }
};
</script>

<style scoped>
.friendship-links {
  padding: 5px;
  background-image: url("../assets/daimond_eyes.webp");

}

.link-container {
  display: flex;
  align-items: center;
  padding: 15px 0px;

}



.most-used-link {
  color: #D2A996;
  font-size: 20px;
  letter-spacing: 0.2em;
}



.divider {
  height: 1px;
  background-color: #ccc;
  margin-bottom: 2px;
}

.links-list {
  display: flex;
  padding: 0;
  margin: 0;
}

.friendship-links li {
  display: flex;
  line-height: 30px;
  list-style: none;
  font-weight: 300;
  text-align: center;
  padding: 0px 0px;
}

.friendship-links a {
  color: #1c6ca1;
  text-decoration: none;
  transition: color 0.3s;
  font-size: 20px;
  font-family: '楷体', KaiTi, serif;
}


.friendship-links a:hover {
  color: #1f436c;
}

.link-box{
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);
  margin: 10px;
  padding: 1px 5px;

}
</style>
